<template>
    <div class="more-wrap">
        <Header></Header>
        <div class="card-warp">
            <Card dis-hover :style="{minHeight: '500px', width:'80%'}">
                <div class="title" slot="title">
                    <div>
                        <Icon :type="icon" class="icon"/>
                        {{title}}
                    </div>
                </div>
                <div class="list">
                    <Spin size="large" fix v-if="loading"></Spin>
                    <List border>
                        <ListItem v-for="item in list">
                            <div class="item-box">
                                <div class="item-title">
                                    <a type="text" size="small" @click="titleClicked(item.id)">{{item.title}}</a>
                                </div>
                                <div>[{{item.createTime}}]</div>
                            </div>
                        </ListItem>
                    </List>
                </div>
                <div class="pager">
                    <Page :total="total" :page-size="pageSize" @on-change="pageChange"/>
                </div>
            </Card>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
    import Header from '../components/header';
    import Footer from '../components/footer';

    export default {
        name: "more",
        components: {
            Header,
            Footer
        },
        mounted() {
            this.title = this.getQueryVariable("title");
            this.icon = this.getQueryVariable("icon");
            this.type = this.getQueryVariable("dataType");
            this.getData();
        },
        watch: {
            '$router': 'getParams'
        },
        methods: {
            titleClicked(id) {
                let routeUrl = this.$router.resolve({
                    name: "detail", query: {
                        id: id,
                        groupTitle: this.title
                    }
                });
                window.open(routeUrl.href, '_blank');
            },
            getQueryVariable(name) {
                const after = window.location.hash.split('?', 2)[1]
                if (after) {
                    const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
                    const r = after.match(reg)
                    if (r != null) {
                        return decodeURIComponent(r[2])
                    } else {
                        return false
                    }
                }
            },
            pageChange(page) {
                this.getData(page);
            },
            getData(page) {
                if (!page) {
                    page = 1;
                }
                let _this = this;
                this.loading = true;
                this.pageSize = 10;
                this.$http({
                    method: 'get',
                    url: '/hm/api?m=getPublishInfosByType&page=' + page + '&type=' + this.type + '&pageSize=' + this.pageSize
                }).then(function (res) {
                    _this.list = res.data.publishInfos;
                    _this.total = res.data.total;
                    _this.pageSize = res.data.pageSize;
                    _this.loading = false;
                }).catch(function (err) {
                    _this.loading = false;
                    console.log(err);
                })
            }
        },
        data() {
            return {
                title: "标题",
                icon: "ios-book",
                type: "",
                total: 0,
                pageSize: 0,
                loading: false,
                list: [
                    // {
                    //     title: "法制大队值班表",
                    //     time: "2021-08-12"
                    // },
                    // {
                    //     title: "转发公安厅《关于开展移动警务平台支撑警种业务应用需求调研工作得通知》",
                    //     time: "2021-08-11"
                    // },
                    // {
                    //     title: "转发公安厅《关于开展移动警务平台支撑警种业务应用需求调研工作得通知》",
                    //     time: "2021-08-11"
                    // },
                    // {
                    //     title: "转发公安厅《关于开展移动警务平台支撑警种业务应用需求调研工作得通知》",
                    //     time: "2021-08-11"
                    // },
                    // {
                    //     title: "转发公安厅《关于开展移动警务平台支撑警种业务应用需求调研工作得通知》",
                    //     time: "2021-08-11"
                    // },
                    // {
                    //     title: "转发公安厅《关于开展移动警务平台支撑警种业务应用需求调研工作得通知》",
                    //     time: "2021-08-11"
                    // },
                    // {
                    //     title: "转发公安厅《关于开展移动警务平台支撑警种业务应用需求调研工作得通知》",
                    //     time: "2021-08-11"
                    // },
                    // {
                    //     title: "转发公安厅《关于开展移动警务平台支撑警种业务应用需求调研工作得通知》",
                    //     time: "2021-08-11"
                    // },
                    // {
                    //     title: "转发公安厅《关于开展移动警务平台支撑警种业务应用需求调研工作得通知》",
                    //     time: "2021-08-11"
                    // },
                    // {
                    //     title: "转发公安厅《关于开展移动警务平台支撑警种业务应用需求调研工作得通知》",
                    //     time: "2021-08-11"
                    // },
                    // {
                    //     title: "转发公安厅《关于开展移动警务平台支撑警种业务应用需求调研工作得通知》",
                    //     time: "2021-08-11"
                    // }
                ]
            }
        }
    }
</script>

<style scoped>
    .more-wrap {
        min-width: 1200px;

    }

    .card-warp {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 5px 0;
    }

    .title {
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        padding-top: 5px;

    }

    .pager {
        display: flex;
        flex-direction: row-reverse;
        margin-top: 10px;
    }

    .item-box {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .item-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    a {
        color: #515a6e;
    }

    a:hover {
        color: #2d8cf0;
    }
</style>